<template>
	<BpmComponent :processInstanceId="processInstanceId" @success="refreshDetail">
		<template #approval-info>
			<up-form labelPosition="left" labelWidth="120">
				<up-form-item v-for="field in formFields" :key="field.prop" :label="field.label" borderBottom>
					{{ field.format ? field.format(formData[field.prop]) : formData[field.prop] || '无' }}
				</up-form-item>
			</up-form>
		</template>
	</BpmComponent>


</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref, unref, reactive, nextTick, getCurrentInstance } from 'vue'
import BpmComponent from '@/components/processInstance/detail/index.vue'
import * as VehicleInCity from '@/api/oa/vehicleout/inCity'


const processInstanceId = ref(null)// 流程实例的编号
const id = ref(null)
const formData = ref<VehicleInCity.VehicLeOutVO>({} as any)
const formFields = [
	{ prop: 'driverName', label: '驾驶员姓名' },
	{ prop: 'driverPhonenumber', label: '联系电话' },
	{ prop: 'userId', label: '用车人' },
	{ prop: 'userPhone', label: '用车人电话' },
	{ prop: 'deptName', label: '用车部门' },
	{ prop: 'sortOrder', label: '编号' },
	// { prop: 'carType', label: '车型' },
	{ prop: 'drivingRoute', label: '行驶路线' },
	{ prop: 'carNumber', label: '车号' },
	// { prop: 'drivingKilometer', label: '行驶公里数' },
	{ prop: 'startTime', label: '用车时间' },
	// { prop: 'endTime', label: '结束日期' },
	// { prop: 'cost', label: '费用' },
	{ prop: 'driverRemark', label: '备注' },
] as any
onLoad(async (options) => {
	processInstanceId.value = options?.processInstanceId
	id.value = options?.id
	/** 获得详情 */
	getDetailById()
})
/** 获取页面详情 */
const getDetailById = async () => {

	try {
		const data = await VehicleInCity.getVehicLeOut(Number(id.value))
		formData.value = data
	} catch (error) {
		console.log('加载数据失败')
	}
}

const refreshDetail = () => {
	console.log('父组件收到刷新事件，重新加载数据')
	getDetailById() // 调用父组件自己的获取详情方法
}
</script>

<style>
/* 样式 */
.uv-node {
	height: 34rpx;
	width: 34rpx;
	border-radius: 50%;
	background-color: #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
	z-index: -1;
}

.audit-node {
	margin: 5px 0;
}
</style>